{% extends "base.html" %}

{% block body %}

<ol class="breadcrumb">
  <li>Service</li>
  <li class="active">Supervisor Process</li>
</ol>

<div class="page-header">
    <h2>
        Supervisor Process
    </h2>
</div>

<table class="table table-hover">
<caption>
<form class="form-inline" style="float: right;" action="/supervisor/process_list" method="post">
 {% csrf_token %}
  <div class="form-group">
    <p class="form-control-static">
        <select class="form-control" name="filter_select">
          <option {% if filter_select == "Status =" %} selected="selected" {% endif %}>Status =</option>
          <option {% if filter_select == "Name" or filter_select == "" %} selected="selected" {% endif %}>Name</option>
          <option {% if filter_select == "Host" %} selected="selected" {% endif %}>Host</option>
        </select>
    </p>
    <input type="text" class="form-control" name="filter_keyword" value="{{filter_keyword}}" placeholder="">
  </div>
  <button type="submit" class="btn btn-default"><span class="fa fa-filter"></span> Filter</button>
  <div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    More Actions <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Restart Process</a></li>
    <li><a href="#">Start Process</a></li>
    <li><a href="#">Stop Process</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Other</a></li>
  </ul>
</div>
</form>
</caption>

    <tr>
        <td colspan="12" data-column="0">
            <span class="table_count">Displaying {{ curent_page_size }} / {{ process_list.paginator.count }} items</span>
        </td>
    </tr>
    <tr class="active">
        <th><input type="checkbox" name="check_all" id="check_all" onclick="checkAll()"></th>
        <th width="10%">Status</th>
        <th width="30%">Name</thw>
        <th width="20%">Host</th>
        <th width="25%">Description</th>
        <th colspan="4" width="15%">Actions</th>
    </tr>
    {% for process in process_list %}
    <tr>
        <td><input type="checkbox" name="check_item"></td>
        <td style="text-transform:capitalize;">
            {{process.statename|lower}}
        </td>
        <td>{{process.name}}</td>
        <td>{{process.host}}</td>
        <td>{{process.description|lower}}</td>
        <td>
 
          <!-- Split button -->
          <div class="btn-group">
            <a type="button" class="btn btn-default btn-sm" href="process_log?host={{process.host}}&host_port={{process.host_port}}&process_name={{process.name}}" target="_blank">Tail Log</a>          
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
            </button>
            {% if request.session.role == "admin" %}
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="javascript:;" onclick="process_opt('{{process.host}}','{{process.host_port}}','{{process.name}}','restart')">Restart Process</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="javascript:;" onclick="process_opt('{{process.host}}','{{process.host_port}}','{{process.name}}','start')">Start Process</a></li>
              <li><a href="javascript:;" onclick="process_opt('{{process.host}}','{{process.host_port}}','{{process.name}}','stop')">Stop Process</a></li>
            </ul>
            {% endif %}
          </div>
        </td>

    </tr>
    {% endfor %}
    <tr>
        <td colspan="12" data-column="0">
            <span class="table_count">Displaying {{ curent_page_size }} / {{ process_list.paginator.count }} items</span>
        </td>
    </tr>
</table>

<div>
  <span style="text-align:center; display:block;">
    <a>
        {% if process_list.has_previous %}
            <a style="text-decoration:underline; color:inherit;" href="{{ page_prefix }}{{ process_list.previous_page_number }}">Previous</a>
        {% endif %}
    </a>
    <a style="color:inherit;">&nbsp; < {{ process_list.number }} / {{ process_list.paginator.num_pages }} > &nbsp;</a>
    <a>
        {% if process_list.has_next %}
            <a style="text-decoration:underline; color:inherit;" href="{{ page_prefix }}{{ process_list.next_page_number }}">Next</a>
        {% endif %}
    </a>
  </span>
</div>

<script> 
//复选框的全选、取消全选功能
function checkAll() {
var all=document.getElementById('check_all');//获取到点击全选的那个复选框的id
var one=document.getElementsByName('check_item');//获取到复选框的名称
//因为获得的是数组，所以要循环 为每一个checked赋值
for(var i=0;i<one.length;i++){
one[i].checked=all.checked; //赋值
}
}
</script>

{% endblock %}
